<template>

    <div class='com-container' style="border-radius: 15px">
      <div class='com-chart'>
<!--        <span style="margin-top: 2px;margin-right: 80%;font-size: 35px;font-family: 华文楷体,serif" >&nbsp; ▎视频&nbsp;监控
        </span>-->
        <div class="video-row">
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>凤城镇</div>
          </div>
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>开栅镇</div>
          </div>
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>南庄镇</div>
          </div>          
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>南安镇</div>
          </div>
        </div>
        <div class="video-row">
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>刘胡兰镇</div>
          </div>
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>下曲镇</div>
          </div>
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>孝义镇</div>
          </div>          
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>南武乡</div>
          </div>
        </div>
        <div class="video-row">
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>西城乡</div>
          </div>
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>北张乡</div>
          </div>
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>马西乡</div>
          </div>          
          <div class="video-item">
            <video :preload="preload"
              :width="width" align="center"
                  :poster="videoImg" :controls="controls"
                  :autoplay="autoplay">
              <source :src="videoSrc" type="video/mp4">
            </video>
            <div>西槽头乡</div>
          </div>
        </div>

      </div>

  </div>
</template>

<script>
import { getThemeValue } from '@/utils/theme_utils'
import { mapState } from 'vuex'
import niu from '@/assets/img/niu.mp4'
import bg from '@/assets/img/bg1.jpg'
import view1 from '@/assets/img/view1.png'

export default {
  name: 'ViewPage',
  data () {
    return {
      // 定义每一个图表的全屏
      nowTime:null,
      //视频
      videoSrc: niu,
      videoImg: bg,
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '80%', // 设置视频播放器的显示宽度（以像素为单位）
      height: '100%', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: '',
      testValus: null,
    }
  },
  methods: {
    VchangClick1(){
      this.$router.push('/ScreenPage')
    },
   /* changClick (){
      this.$router.push('/Screen')
    },
    handleChangeTheme () {
      this.$router.push('/Screen')
    },*/
    getTime () {
      var that=this;
      console.log("运行了");
      var t = null;
      // 1秒等于1000毫秒
      t = setTimeout(time,1000);
      function time() {
        clearTimeout(t);
        var dt = new Date(); //获取未解析的时间
        var yyyy = dt.getFullYear(); //获取年
        var MM = dt.getMonth() +1; //获取月
        var dd = dt.getDate(); //获取日
        var HH = dt.getHours(); //获取时
        var mm = dt.getMinutes(); //获取分
        var ss = dt.getSeconds(); //获取秒
        that.nowTime = yyyy+"年"+MM+"月"+dd+"日"+" "+HH+"时"+mm+"分"+ss+"秒";
        t = setTimeout(time,1000);
      }
    }
  },
  computed: {
    /*VchangClick1(){
      this.$router.push('/ScreenPage')
    },*/
  /*  VchangClick (){
      this.$router.push('/dgw/bree').catch(reason => {
      })
    },*/
    headerSrc () {
      return getThemeValue(this.theme).headerBorderSrc
    },
    themeSrc () {
      return view1
    },
    containerStyle () {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  mounted() {
    this.getTime();

  }
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
// .fullscreen {
//   position: fixed ;
//   top: 0 ;
//   left: 0 ;
//   width: 100% ;
//   height: 100% ;
//   margin: 0 ;
//   z-index: 100;
// }

// .screen-container {
//   width: 100%;
//   height: 100%;
//   padding: 0 20px;
//   background-color: #161522;
//   color: #fff;
//   box-sizing: border-box;
// }

// .screen-header {
//   width: 100%;
//   height: 64px;
//   font-size: 20px;
//   position: relative;

//   > div {
//     img {
//       width: 100%;
//     }
//   }

//   .title {
//     position: absolute;
//     left: 50%;
//     top: 50%;
//     font-size: 20px;
//     transform: translate(-50%, -50%);
//   }

//   .title-right {
//     display: flex;
//     align-items: center;
//     position: absolute;
//     right: 0px;
//     top: 50%;
//     transform: translateY(-80%);
//   }

//   //按钮颜色
//   .el-button&#45;&#45;primary{
//     background: #2c2b31;
//     margin-top: 15px;
//   }

//   .datetime {
//     font-size: 15px;
//     margin-left: 10px;
//   }

//   .logo {
//     position: absolute;
//     left: 0px;
//     top: 50%;
//     transform: translateY(-80%);

//     img {
//       height: 35px;
//       width: 128px;
//     }
//   }
// }

// .resize {
//   position: absolute;
//   right: 20px;
//   top: 20px;
//   cursor: pointer;
// }
.com-chart {
  display: flex;
  flex-flow: column;
  padding-top: 10px;
}
.video-row {
  flex: 1;
  display: flex;
  .video-item {
    flex: 1;
    div {
      color: #848896;
      margin-top: 4px;
    }
  }
}
</style>

